<template>
  <el-row class="edit">
    <el-container style="height: 100%;">
      <el-header height="60px">
        上传票面图片
      </el-header>
      <el-main>
        <el-form label-width="115px" label-position="left">
          <el-form-item label="票面图片 :">
            <el-upload
              ref="upload"
              action="''"
              list-type="picture-card"
              :file-list="showImgs"
              :auto-upload="false"
              :http-request="uploadFile"
            >
              <i class="el-icon-plus" />
            </el-upload>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer height="80px">
        <el-row style="height: 20px;margin-bottom: 5px;">
          <transition name="el-zoom-in-bottom">
            <el-row v-show="infoShow" style="display: flex;justify-content: center;align-items: center;">
              {{ (info !== '') ? "提示信息："+info : '' }}
            </el-row>
          </transition>
        </el-row>

        <el-row style="display: flex;justify-content: center;align-items: center;">
          <el-button type="primary" @click="submit">
            保存
          </el-button>
          <el-button @click="editOut">
            取消
          </el-button>
        </el-row>
      </el-footer>
    </el-container>
  </el-row>
</template>

<script>
import { replaceSpacesObj } from '../../../utils/webUtils'

export default {
  name: 'AddImg',
  props: {
    salanPlanUuid: {
      type: String
    }
  },
  data() {
    return {
      uuid: this.salanPlanUuid,
      addTictData: {
        imgStr: ''
      },
      info: '',
      infoShow: false,
      imgformData: {},
      showImgs: [],
      list: []

    }
  },
  watch: {
    salanPlanUuid(val) {
      this.uuid = val
    }
  },
  methods: {
    uploadFile(item) {
      const formData = new FormData()
      formData.append('upFile', item.file)
      this.axios.post(
        'https://whcm.21theone.cn:9010/tck/kdi/salan/' + this.uuid + '/imgup', formData
      ).then(res => {
        this.list.push({ 'filename': res.data.filename, 'url': res.data.url })
        this.addTictData.imgStr = JSON.stringify(this.list)
        this.uploadImg()
      }).catch(error => {
        console.log(error)
        this.info = '图片上传失败！'
        this.infoShow = true
      })
    },
    submit() {
      if (this.showImgs.length > 0) {
        this.showImgs.forEach(res => {
          this.list.push({ 'filename': res.name, 'url': res.url.substr(res.url.lastIndexOf('tict')) })
        })
        this.addTictData.imgStr = JSON.stringify(this.list)
      } else {
        this.addTictData.imgStr = ''
      }
      this.uploadImg()
      this.$refs.upload.submit()
      this.endProcessing()
      this.$emit('fatherMethod')
    },
    uploadImg() {
      this.axios.request({
        method: 'put',
        url: './tck/kdi/salan/' + this.uuid + '/img',
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        },
        data: replaceSpacesObj(this.addTictData)
      }).then(() => {
      }).catch(error => {
        console.log(error)
        this.info = '上传图片后回写imgStr数据失败！'
        this.infoShow = true
      })
    },
    endProcessing() {
      this.info = this.info + '新增成功,两秒后关闭'
      this.infoShow = true
      setTimeout(() => {
        this.infoShow = false
        this.$emit('imgState', false)
        this.info = ''
      }, 2000)
    },
    editOut() {
      this.infoShow = false
      this.info = ''
      this.$emit('imgState', false)
    }
  }
}
</script>

<style scoped>
  .edit {
    width: 334px;
    height: 100%;
    z-index: 100;
  }

</style>
